<template>
    <div class="container">
        <!-- 头部 -->
        <van-nav-bar 
        title='已服务项目' 
        left-text="返回" 
        left-arrow
        @click-left="onClickLeft">
            <template #right>
                <div @click="toUser" class="nav-img"><img src="../assets/user.png" ></div>
            </template>
        </van-nav-bar>
        <!-- 主要内容 -->
        <div class="content">
            <div class="friend-list">
                <div class="list-item" v-for="item in friendsList" :key="item.id">
                    <img :src="item.value" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
export default {
    data(){
        return{
            // friends
            friendsList:[
                {value:'/static/friend1.jpg',id:0},
                {value:'/static/friend2.jpg',id:1},
                {value:'/static/friend3.jpg',id:2},
                {value:'/static/friend4.jpg',id:3},
                {value:'/static/friend5.jpg',id:4},
                {value:'/static/friend6.jpg',id:5},
                {value:'/static/friend7.jpg',id:6},
            ],
        }
    },
    computed:{
        ...mapState(["turnOpen"])
    },
    methods:{
        ...mapActions(["saveRouter"]),
        // 返回上一页面
        onClickLeft(){
            // this.$router.go(-1);
            if(this.turnOpen==0){
                this.$router.go(-1);
            }else{
                this.$router.push({path:'/home'})
                this.saveRouter(0)
            }
        },
        // 去用户信息
		toUser(){
			this.$router.push({path:"/user"})
		},
    }
}
</script>
<style lang="less" scoped>
/// 顶部样式
/deep/.van-nav-bar__text{
	color: #333;
}
/deep/.van-nav-bar{
	.van-icon{
		color: #333;
	}
}
.nav-img{
	img{
		width: 0.39rem;
		height: 0.39rem;
	}
}
// 主要内容
.content{
    padding: 0 0.3rem;
    
}
.friend-list{
    display: flex;
    flex-wrap: wrap;
    .list-item{
        width: 33.33%;
        height: 1rem;
        margin-top: 0.25rem;
        display: flex;
        justify-content: center;
        img{
            width: 90%;
            height: 100%;
            border: 1px solid #eee;
        }
    }
}
</style>